<!--
 * @Author: QUAN
 * @Date: 2021-09-23 15:13:49
 * @LastEditTime: 2021-11-10 14:59:10
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \mutong-jimu-h5\src\views\MyInfo\index.vue
-->

<!--这个应该废弃喽-->

<template>
  <div class="loading-data" v-if="!userInfo.nickname">
    <van-nav-bar
      title="个人履历"
      left-arrow
      v-if="$UA.isJM"
      @click-left="closed"
      class="my-nav-bar"
    >
    </van-nav-bar>
    <van-loading  vertical>正在加载...</van-loading>
  </div>
  <div class="my-info" v-else>
    <!-- nav-bar -->
    <van-nav-bar
      :title="userInfo.nickname"
      left-arrow
      v-if="$UA.isJM"
      @click-left="closed"
      @click-right="share"
      class="my-nav-bar"
    >
      <template #right>
        <img src="../../assets/images/icon-share-black.png" alt="" />
      </template>
    </van-nav-bar>

    <!-- 横线 -->
    <div class="line nav-bar-line" v-if="$UA.isJM"></div>

    <!-- 详情信息 -->
    <div class="info">
      <div class="info-left">
        <p class="title">{{ userInfo.nickname || '' }}</p>
        <p class="identification" v-if="userInfo.identifiedTitle">
          <span>认证：{{ userInfo.identifiedTitle }}</span>
        </p>
        <p class="quan-info">
          <span>{{ h_showDataText }}</span>
        </p>
        <p class="button">
          <span v-app-jump="{ to: toJM }" v-if="!$UA.isJM">查看作品与邀约合作</span>
          <span @click="exit" v-else-if="$UA.isJM && userInfo.uuid !== userInfoLogin.uuid">查看作品与邀约合作</span>
          <span
            @click="toAccount"
            v-else-if="$UA.isJM && userInfo.uuid === userInfoLogin.uuid && !userInfoSkills"
          >完善基础信息</span>
          <span
            @click="toAccount"
            v-else-if="$UA.isJM && userInfo.uuid === userInfoLogin.uuid && userInfoSkills"
          >编辑基础信息</span>
          <van-icon name="arrow" />
        </p>
      </div>
      <div class="info-right" @click="exit">
        <img :src="userInfo.avatar" alt="" />
      </div>
    </div>

    <!-- 横线 -->
    <div class="line"></div>

    <!-- 职业能力 -->
    <div class="career-ability">
      <h2 v-if="($UA.isJM && userInfo.uuid === userInfoLogin.uuid) || (userInfoSkills.ability || userInfoSkills.experience)">职业能力</h2>
      <h6 v-if="userInfoSkills.ability">技能/业务</h6>
      <p v-html="userInfoSkills.ability"></p>
      <h6 v-if="userInfoSkills.experience">经验</h6>
      <p v-html="userInfoSkills.experience"></p>
      <div
        class="add-button"
        @click="goCareer"
        v-if="($UA.isJM && userInfo.uuid === userInfoLogin.uuid) && (!userInfoSkills.ability && !userInfoSkills.experience)"
      >
        <van-icon name="plus" />
        <span>添加能力说明与项目经验，增加合作机会</span>
      </div>
      <div
        class="add-button"
        @click="goCareer"
        v-if="($UA.isJM && userInfo.uuid === userInfoLogin.uuid) && (userInfoSkills.ability || userInfoSkills.experience)"
      >
        <img src="../../assets/images/edit.png" class="add-img" alt="">
        <span>编辑职业能力</span>
      </div>
    </div>

    <!-- 横线 -->
    <div
      class="line education-line"
      v-if="($UA.isJM && userInfo.uuid === userInfoLogin.uuid) || (userInfoEducation.length > 0 && userInfoSkills.ability && userInfoSkills.experience)"
    ></div>

    <!-- 教育经历 -->
    <div class="career-ability">
      <h2 v-if="($UA.isJM && userInfo.uuid === userInfoLogin.uuid) || userInfoEducation.length > 0">
        教育经历
      </h2>
      <div class="education-info">
        <div
          class="education-item"
          v-for="(item, index) in userInfoEducation"
          :key="index"
          @click="goEducation(item)"
        >
          <div class="name-time">
            <span>{{ item.college }}</span>
            <span class="time">{{ item.period }}</span>
          </div>
          <div class="major">
            <span>{{ item.major }}</span>
          </div>
        </div>
      </div>
      <div
        class="add-button"
        @click="goEducation('')"
        v-if="$UA.isJM && userInfo.uuid === userInfoLogin.uuid"
      >
        <van-icon name="plus" />
        <span>增加教育经历</span>
      </div>
    </div>

    <!-- 说明 -->
    <div class="state" :class="{ isApp: $UA.isJM }">
      对于履历完善的用户，积幕将增加推荐曝光
    </div>

    <!-- 在app外打开app -->
    <bottom-open-app-adv v-if="!$UA.isJM" v-app-jump="{ to: toJM }"></bottom-open-app-adv>
  </div>
</template>
<script>
  import BottomOpenAppAdv from '../../components/BottomOpenAppAdv.vue';
  import { Button, NavBar, Icon, Toast,Loading } from 'vant';
  import qs from 'qs';
  export default {
    components: {
      BottomOpenAppAdv,
      // 'van-button': Button,
      'van-nav-bar': NavBar,
      'van-icon': Icon,
      'van-loading': Loading,
    },
    data() {
      return {
        // map的数据
        identifiedSL: {
          value_0: '未认证',
          value_1: '个人认证',
          value_2: '团队认证',
          value_3: '讲师认证',
        },
        sexSL: {
          value_0: '未知',
          value_1: '男',
          value_2: '女',
        },
        // 跳转到积幕里面的页面
        toJM: `mtjimu://webview?url=${encodeURIComponent(window.location.href)}`,
        uuid: '',
        from: '',
        userInfo: {},
        userInfoProfile: {},
        userInfoSkills: {}, //技能
        userInfoLogin: {},
        userInfoEducation: {}, //教育经历

        // 横排信息展示
        h_showData: [],
        h_showDataText:'',
      };
    },
    created() {
      let query = qs.parse(window.location.search.replace(/^\?/, ''))
      this.uuid = query.uuid
      this.from = query.from

      // 发请求
      this.init();
    },
    mounted() {
      // 设置头部
      this.$appService.setNav({
        title: '',
        fullscreen: true,
      });
      
      // 刷新
      this.$EventBus.$on('jm:hybridActive', () => {
        // window.location.reload()

        this.init()
      });
    },
    methods: {
      init() {
        if (!this.uuid) {
          Toast('缺少uuid');
          return;
        }
        // 得到数据
        this.getUserInfoSkills();
        this.getUserInfoEducation();
        this.getUserInfoProfile();
        // 从app里面得到用户数据
        this.$UA.isJM && this.loginInfo();
      },
      // 增加教育经历
      goEducation(val) {
        if (this.userInfo.uuid !== this.userInfoLogin.uuid) return;
        this.$appService.openLink({
          link: `mtjimu://eduexperience${val.id ? '?id=' + val.id : ''}`,
        });
      },
      // 去个人中心
      toAccount() {
        this.$appService.openLink({ link: `mtjimu://account` });
      },
      // 编辑职业能力
      goCareer() {
        this.$appService.openLink({
          link: `${
            process.env.NODE_ENV === 'development' ? 'https://dev-hybrid.movtile.com' : ''
          }/career.html?id=${this.uuid}`,
        });
      },
      // 从app得到登录信息
      async loginInfo() {
        this.userInfoLogin = await this.$appService.userInfo();
      },
      // 退出
      exit() {
        if(this.from !== 'uc'){
          this.$appService.openLink({
            link: `mtjimu://homepage?uid=${this.uuid}&opt=1`,
          });
        }else{
          this.$appService.exit();
        }
      },
      closed(){
        this.$appService.exit();
      },
      // 分享
      share() {
        // 字段不对应得改改
        this.$appService.share({
          title: this.userInfo.shareInfo.title || '',
          desc: this.userInfo.shareInfo.subTitle || '',
          link: `https://${
            process.env.NODE_ENV === 'development' ? 'dev-' : ''
          }jimu-h5.movtile.com/myinfo.html?uuid=${this.uuid}`,
          imgUrl: this.userInfo.shareInfo.image || '',
        });
      },
      // 得到数据
      getUserInfoData() {
        this.$service.UserInfoDetail({ uuid: this.uuid }).then((res) => {
          this.userInfo = res;
          // 设置微信分享
          wx.ready(() => {
            this.$setShareInfo({
              ...this.userInfo.shareInfo,
              url: `https://${
                process.env.NODE_ENV === 'development' ? 'dev-' : ''
              }jimu-h5.movtile.com/myinfo.html?uuid=${this.uuid}`,
            });
          });
          // 用自己的标题
          this.$appService.setNav({
            title: '个人履历',
            fullscreen: true,
          });
          // 处理数据
          this.userInfo.profession && this.h_showData.push(this.userInfo.profession);
          this.userInfo.identifiedYear && this.h_showData.push('从业' + this.userInfo.identifiedYear + '年');
          // 这里最后一项在ios会出现两个，不知道啥原因
          // 先直接去重一下试试
          this.h_showData = [...new Set(this.h_showData)]
          this.h_showDataText = this.h_showData.join(' / ')
        });
      },
      // 得到个人资料另外的信息
      getUserInfoProfile() {
        this.$service.UserInfoProfile({ uuid: this.uuid }).then((res) => {
          this.userInfoProfile = res;

          // 先滞空
          this.h_showData = [];
          this.h_showDataText = ''
          // 数据处理
          this.userInfoProfile.age && this.h_showData.push(this.userInfoProfile.age + '岁');
          this.userInfoProfile.sex && this.userInfoProfile.sex!==3 && this.h_showData.push(this.sexSL['value_' + this.userInfoProfile.sex]);
          this.userInfoProfile.city && this.h_showData.push(this.userInfoProfile.city);

          // 得到了再去
          this.getUserInfoData();
        });
      },
      // 得到职业技能数据
      getUserInfoSkills() {
        // axios.get(`${process.env.VUE_APP_BASE_URL}/user/extra/info?uuid=${this.uuid}`).then(res=>{
        //   this.userInfoSkills = res.data.data;
        //     // 空的富文本
        //     if(this.userInfoSkills.ability === '<p><br data-mce-bogus=\"1\"></p>' || this.userInfoSkills.ability === `<p><br></p>`){
        //       this.userInfoSkills.ability = ''
        //     }
        //     if(this.userInfoSkills.experience === '<p><br data-mce-bogus=\"1\"></p>' || this.userInfoSkills.experience === `<p><br></p>`){
        //       this.userInfoSkills.experience = ''
        //     }
        // }).catch(err=>{
        //   Toast(JSON.stringify(err))
        //     this.userInfoSkills = '';
        // })
        this.$service
          .UserExtraInfo({ uuid: this.uuid})
          .then((res) => {
            this.userInfoSkills = res;
            // 空的富文本
            if(this.userInfoSkills.ability === '<p><br data-mce-bogus=\"1\"></p>' || this.userInfoSkills.ability === `<p><br></p>`){
              this.userInfoSkills.ability = ''
            }
            if(this.userInfoSkills.experience === '<p><br data-mce-bogus=\"1\"></p>' || this.userInfoSkills.experience === `<p><br></p>`){
              this.userInfoSkills.experience = ''
            }
          })
          .catch((err) => {
            Toast(JSON.stringify(err))
            this.userInfoSkills = '';
          });
      },
      // 得到教育经历数据
      getUserInfoEducation() {
        this.$service.UserEducationList({ uuid: this.uuid }).then((res) => {
          this.userInfoEducation = res;
        });
      },
    },
  };
</script>
<style lang="less" scoped>
  // vant样式修改
  /deep/ .van-nav-bar {
    .van-nav-bar__title {
      color: #111;
      font-weight: 600;
      font-size: 20px;
    }
    .van-nav-bar__arrow {
      color: #111;
      font-size: 19px;
    }
    .van-nav-bar__right {
      padding-right: 2rem;
      img {
        width: 2.3rem;
        height: 2.3rem;
      }
    }
  }
  // nav-bar
  .my-nav-bar {
    height: 8.8rem;
    padding: 4.7rem 0rem 0rem;
  }

  // 加载数据loading展示的页面
  .loading-data{
    max-width: 75rem;
    min-height: 100vh;
    .van-loading{
      display: flex;
      margin-top: 60%;
      justify-content: center;
      align-items: center;
    }
  }
  
  // 主页面
  .my-info {
    max-width: 75rem;
    min-height: 100vh;
    
    .van-hairline--bottom::after {
      border-bottom-width: 0px;
    }

    // 横线
    .nav-bar-line {
      margin-top: 1.2rem !important;
    }

    // 详细信息
    .info {
      padding: 2.9rem 2rem 0rem;
      color: #111;
      display: flex;
      .info-left {
        width: calc(100% - 8rem);
        .title {
          font-size: 25px;
          font-weight: 800;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .identification {
          margin-top: 1.7rem;
          font-size: 14px;
          font-weight: 400;
        }
        .quan-info {
          font-size: 14px;
          margin-top: 1.5rem;
          font-weight: 400;
        }
        .button {
          margin-top: 2.9rem;
          display: flex;
          align-items: center;
          font-size: 14px;
          font-weight: 800;
          /deep/ .van-icon {
            margin-top: 0.2rem;
            font-weight: 800;
            margin-left: 0.2rem;
          }
        }
      }
      .info-right {
        // margin-top: 6rem;
        width: 8rem;
        img {
          width: 8rem;
          height: 8rem;
          border-radius: 50%;
        }
      }
    }

    // 横线
    .line {
      height: 1px;
      margin: 3.3rem 2rem 0rem;
      background: #f3f3f3;
    }

    // 职业能力
    .career-ability {
      margin: 0rem 2rem;
      color: #111;
      h2 {
        position: relative;
        margin-top: 2.1rem;
        font-size: 17px;
        font-weight: 800;
        &::after {
          content: '';
          position: absolute;
          top: 13px;
          left: 0;
          width: 68px;
          height: 11px;
          background: #888888;
          opacity: 0.1;
        }
      }
      h6 {
        margin-top: 3.3rem;
        font-size: 15px;
        font-weight: 800;
      }
      p {
        margin-top: 1rem;
        font-size: 15px;
        font-weight: 400;
      }
      .add-button {
        margin-top: 2.7rem;
        height: 47px;
        background: #f3f3f3;
        border-radius: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        .van-icon {
          margin-top: 0.2rem;
          font-size: 14px;
          font-weight: 800;
          color: #111111;
        }
        span {
          margin-left: 0.7rem;
          font-size: 14px;
          font-weight: 800;
          color: #111111;
        }
        .add-img{
          width: 18px;
          height: 18px;
          margin-top: 1px;
        }
      }
    }

    // 教育经历
    .education-line {
      margin-top: 3.3rem;
    }

    .education-info {
      margin-top: 3.2rem;
      .education-item {
        margin-top: 2.9rem;
        .name-time {
          display: flex;
          justify-content: space-between;
          font-size: 15px;
          font-weight: 800;
          color: #111111;
          line-height: 24px;
          .time {
            font-size: 15px;
            font-weight: 400;
            color: #888888;
            line-height: 27px;
          }
        }
        .major {
          font-size: 15px;
          font-weight: 400;
          color: #111111;
          margin-top: 1rem;
          line-height: 24px;
        }
      }
    }

    // 说明
    .state {
      padding: 2.5rem 2rem 7rem;
      font-size: 12px;
      font-weight: 400;
      color: #888888;
      text-align: center;
    }
    .isApp {
      padding: 2.5rem 2rem 2rem;
    }
  }
</style>
